<template>
  <div class="bw-custom-com-props">
    <a-button :block="true" type="primary" @click="onOpenModal()">
      新增属性
    </a-button>

    <ul class="bw-com-peops-list">
      <li class="bw-com-peops-item" v-for="item in curPropList" :key="item.key">
        <span> {{ item.name }} </span>
        <div>
          <a-tooltip title="删除">
            <icon icon="ant-design:delete-outlined" @click="onDel(item.key)" />
          </a-tooltip>

          <a-tooltip title="编辑">
            <icon icon="ant-design:form-outlined" @click="onOpenModal(item)" />
          </a-tooltip>
        </div>
      </li>
    </ul>

    <BwModalForm
      :form-data="curFormData"
      v-bind="curOptions"
      v-model:visible="curVisible"
      @ok="onModalOk"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, unref, markRaw, computed, onMounted } from 'vue'
import { useComDesignStoreWithOut, getCortomComList } from '@/store'
import {
  BwComPropSetConstValueComEnum,
  BwCustomComNodeAttrDataTypeEnum,
  type BwCustomComPropInfoModel,
} from '@bitwit/base-com-render'

import { BwModalForm } from '@/components/form'
import { Switch, Input, Select, Textarea } from 'ant-design-vue'

const designStore = useComDesignStoreWithOut()

const curVisible = ref<boolean>(false)
const modalType = ref<'add' | 'edit'>('add')
const curPropItem = ref<BwCustomComPropInfoModel | null>(null)
const curFormData = ref<Record<string, any>>({})
const curPropList = computed(() => {
  const info = designStore.curDesignInfo
  const curProps = info?.comProps
  return curProps ?? []
})

const curDataTypeList = computed(() => {
  return [
    { value: BwCustomComNodeAttrDataTypeEnum.string, label: '字符串' },
    { value: BwCustomComNodeAttrDataTypeEnum.boolean, label: '布尔' },
    { value: BwCustomComNodeAttrDataTypeEnum.number, label: '数字' },
    { value: BwCustomComNodeAttrDataTypeEnum.array, label: '数组' },
    { value: BwCustomComNodeAttrDataTypeEnum.object, label: '对象' },
  ]
})

/** 组件外放属性常量值配置组件 */
const comConstValueSetComList = computed(() => {
  return [
    { value: BwComPropSetConstValueComEnum.input, label: '输入框' },
    { value: BwComPropSetConstValueComEnum.number, label: '数字框' },
    { value: BwComPropSetConstValueComEnum.textarea, label: '文本域' },
    { value: BwComPropSetConstValueComEnum.switch, label: '开关' },
    { value: BwComPropSetConstValueComEnum.select, label: '下拉框' },
    { value: BwComPropSetConstValueComEnum.colSpan, label: '栅格占位' },
    { value: BwComPropSetConstValueComEnum.color, label: '颜色' },
    { value: BwComPropSetConstValueComEnum.date, label: '日期' },
    { value: BwComPropSetConstValueComEnum.dateRange, label: '日期区间' },
    { value: BwComPropSetConstValueComEnum.time, label: '时间' },
    {
      value: BwComPropSetConstValueComEnum.dataObjSelect,
      label: '数据对象下拉框',
    },
    {
      value: BwComPropSetConstValueComEnum.dataObjField,
      label: '数据对象字段',
    },
    {
      value: BwComPropSetConstValueComEnum.tableColumnConfig,
      label: '表格列配置',
    },
    {
      value: BwComPropSetConstValueComEnum.tableActionBars,
      label: '表格顶部操作栏配置',
    },
    {
      value: BwComPropSetConstValueComEnum.tableActionColumn,
      label: '表格操作列配置',
    },
    {
      value: BwComPropSetConstValueComEnum.tableStatistic,
      label: '表格统计栏配置',
    },
    {
      value: BwComPropSetConstValueComEnum.dataSourceConfig,
      label: '数据源配置',
    },
    {
      value: BwComPropSetConstValueComEnum.tabsItems,
      label: '标签页标签项列表配置',
    },
  ]
})

const curOptions = computed(() => {
  return {
    title: `编辑外放属性信息`,
    width: 800,
    okText: '确定',
    cancelText: '取消',
    wrap: {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
    },
    formRules: [
      {
        title: `属性名称`,
        field: 'name',
        type: markRaw(Input),
        props: { placeholder: `请填写属性名称` },
        rules: {
          required: true,
          message: `请填写属性名称`,
        },
      },
      {
        title: `属性标识`,
        field: 'code',
        type: markRaw(Input),
        props: { placeholder: `请填写属性标识` },
        rules: {
          required: true,
          message: `请填写属性标识`,
        },
      },
      {
        title: `是否是绑定值`,
        field: 'isModel',
        medelField: 'checked',
        type: markRaw(Switch),
      },
      {
        title: `是否必填`,
        field: 'require',
        medelField: 'checked',
        type: markRaw(Switch),
      },
      {
        title: '数据类型',
        field: 'dataType',
        type: markRaw(Select),
        props: {
          mode: 'multiple',
          allowClear: true,
          placeholder: '请选择数据类型',
          options: unref(curDataTypeList),
        },
      },
      {
        title: '默认值数据类型',
        field: 'defaultDataType',
        type: markRaw(Select),
        props: {
          allowClear: true,
          placeholder: '请选择默认值数据类型',
          options: unref(curDataTypeList),
        },
      },
      {
        title: '默认值',
        field: 'defaultValue',
        type: markRaw(Textarea),
        props: {
          allowClear: true,
          placeholder: '请输入默认值',
        },
      },
      {
        title: '常量值配置组件',
        field: 'constValueSetCom',
        type: markRaw(Select),
        props: {
          allowClear: true,
          options: unref(comConstValueSetComList),
          placeholder: '请选择常量值配置组件',
        },
      },
      {
        title: '常量值配置组件属性',
        field: 'constValueSetComProps',
        type: markRaw(Textarea),
        props: {
          allowClear: true,
          placeholder: '请输入常量值配置组件的属性',
        },
        rules: {
          validator(rule, value, callback) {
            try {
              value && JSON.parse(value)
              callback(undefined)
            } catch {
              callback(`常量值配置组件的属性输入格式不对，应该是JSON对象值`)
            }
          },
        },
      },
      {
        title: '备注',
        field: 'desc',
        type: markRaw(Textarea),
        props: {
          allowClear: true,
          placeholder: '请输入备注',
        },
      },
    ],
  }
})

const onDel = (key: string) => {
  designStore.onDelProp(key)
}

const onOpenModal = (data?: BwCustomComPropInfoModel) => {
  if (!data) {
    curPropItem.value = null
    modalType.value = 'add'
  } else {
    modalType.value = 'edit'
    curPropItem.value = data

    curFormData.value = {
      code: data.key,
      name: data.name,
      isModel: data.isModel,
      require: data.isRequire,
      dataType: data.dataType,
      defaultValue: data.defaultValue,
      defaultDataType: data.defaultValueDataType,
      constValueSetCom: data.constValueSetCom,
      constValueSetComProps: data.constValueSetComProps,
      desc: data.remark,
    }
  }
  curVisible.value = true
}

const onModalOk = () => {
  if (unref(modalType) === 'add') {
    onAddProp()
  } else if (unref(modalType) === 'edit') {
    onEditProp()
  }
}

const onAddProp = () => {
  designStore
    .onAddProp({
      key: unref(curFormData).code,
      name: unref(curFormData).name,
      isModel: unref(curFormData).isModel,
      isRequire: !!unref(curFormData).require,
      dataType: unref(curFormData).dataType,
      defaultValue: unref(curFormData).defaultValue,
      defaultValueDataType: unref(curFormData).defaultDataType,
      remark: unref(curFormData).desc,
      constValueSetCom: unref(curFormData).constValueSetCom,
      constValueSetComProps: unref(curFormData).constValueSetComProps,
    })
    .then(() => (curVisible.value = false))
}

const onEditProp = () => {
  const curProp = unref(curPropItem)
  if (curProp) {
    designStore
      .onEditProp(curProp, {
        key: unref(curFormData).code,
        name: unref(curFormData).name,
        isModel: unref(curFormData).isModel,
        isRequire: !!unref(curFormData).require,
        dataType: unref(curFormData).dataType,
        defaultValue: unref(curFormData).defaultValue,
        defaultValueDataType: unref(curFormData).defaultDataType,
        constValueSetCom: unref(curFormData).constValueSetCom,
        constValueSetComProps: unref(curFormData).constValueSetComProps,
        remark: unref(curFormData).desc,
      })
      .then(() => (curVisible.value = false))
  }
}

onMounted(() => {
  getCortomComList('com-attr-set-com').then((comList) => {
    console.log('comList', comList)
  })
})
</script>

<style lang="less" scoped>
.bw-custom-com-props {
  padding: 0 8px;
  width: calc(100% - 16px);

  .bw-com-peops-list {
    width: 100%;
    margin-top: 8px;
    display: flex;
    flex-direction: column;

    .bw-com-peops-item {
      height: 30px;
      padding: 0 8px;
      margin-bottom: 8px;
      border-radius: 5px;
      display: inline-flex;
      align-items: center;
      border: 1px solid #e8e8e8;
      justify-content: space-between;
      width: calc(100% - 16px);
    }
  }
}
</style>
